<template>
  <div class="c-goodsList">

    <transition name="fade">

    <router-link :key="'mini'"  to="/goodsList/-1" tag="div" class="c-goodsList-mini">
        清单
    </router-link>

    </transition>

    <transition name="fade">

      <div :key="'max'" class="c-goodsList-max" v-show="state.type === 2">

        <div class="max-header">
              我的清单
              <x-icon @click="switchType(1)" fill="#F70968" class="max-header-close" type="ios-close-empty" size="30"></x-icon>
        </div>

        <div class="max-body">

        </div>

        <div class="max-footer">

        </div>

      </div>

    </transition>

  </div>
</template>

<script>
  import $ from "jquery";
  import {mapGetters} from "vuex";
  export default {
    name: "goods-list",
    data() {
      return {
        state: {
          type: 1
        }
      }
    },
    components: {

    },
    methods: {
      switchType(val) {
        this.state.type = val;
        if (val === 2) {
          $("#normal_back").css("z-index", 0);
        } else {
          setTimeout(() => {
            $("#normal_back").css("z-index", 100);
          }, 200);
        }
      },
      reduceItem(item){
        console.log(item)
      }
    },
    computed:{
      ...mapGetters(['goods_ShareList'])
    },
    mounted(){
      console.log(this.goods_ShareList)
    }
  }
</script>

<style lang="less">
  .c-goodsList {
    &-mini {
      position: fixed;
      bottom: 2rem;
      right: 0.15rem;
      width: 0.8rem;
      height: 0.8rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background: #fe6565;
      color: #fff;
      box-shadow: 0 0 10px #ccc;
      text-align: center;
      font-size: 0.24rem;
    }
    &-max {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
      background: #fff;

      .max-header {
        height: 0.9rem;
        line-height: 0.9rem;
        width: 100%;
        text-align: center;
        background: #fff;
        border-bottom: 1px solid #ccc;
        font-size: 0.28rem;
        box-shadow: 0 0 5px #ccc;
        z-index: 999;
        position: relative;

        &-close{
          position: absolute;
          left: 0.2rem;
          top: 0.15rem;
        }
      }

      .max-body {
        position: absolute;
        top: 0.9rem;
        left: 0;
        right: 0;
        bottom: 0.7rem;
        background: #26a2ff;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
    .fade-enter-active {
      animation: fadeIn 0.3s;
    }
    .fade-leave-active {
      animation: fadeOut 0.3s;
    }
  }
</style>
